<template>
  <div
    class="square-button"
    :style="{ width: props.width, height: props.height, backgroundColor: props.bgColor }"
  >
    <img
      :src="props.izDark ? props.iconEntity.dUrl : props.iconEntity.url"
      alt="tag"
      :style="{
        fontSize: props.iconSize + 'px',
        width: props.iconSize + 'px',
        height: props.iconSize + 'px'
      }"
    />
  </div>
</template>

<script setup lang="ts">
import { CommonTypes } from '@globalTypes/global'

interface Props {
  iconEntity: CommonTypes.IconEntity
  height: string
  width: string
  iconSize?: number
  bgColor: string
  izDark?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  iconSize: 20,
  izDark: false
})
</script>

<style lang="scss" scoped>
.square-button {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  &:hover {
    opacity: 1;
  }
}
</style>
